import { ResponsiveBar } from '@nivo/bar';

const data = [
  { country: 'USA', 'hot dog': 120, 'burger': 80 },
  { country: 'Germany', 'hot dog': 60, 'burger': 120 },
  { country: 'France', 'hot dog': 80, 'burger': 100 },
];

const NivoView = () => {
    return(
        <div style={{ height: 400 }}>
    <ResponsiveBar
      data={data}
      keys={['hot dog', 'burger']}
      indexBy="country"
      margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
      padding={0.3}
      colors={{ scheme: 'nivo' }}
      axisBottom={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: 'Country',
        legendPosition: 'middle',
        legendOffset: 32,
      }}
    />
    
  </div>
    )
}
export default NivoView
